<template>
  <view class="li-pagination">
    <view class="pagination" v-if="!showIcon">
      <view style="width: 33.33%; margin-left: 5px">
        <button v-if="pageNum > 1" @click="onBtnClick(-1)">
          {{ prevText }}
        </button>
      </view>
      <view
        style="
          width: 33.33%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
        "
        ><text style="color: #288dec">{{ pageNum }}</text
        >/

        <text> {{ Math.ceil(total / pageSize) }}</text>
      </view>
      <view style="width: 33.33%; margin-right: 5px">
        <button
          v-if="pageNum < Math.ceil(total / pageSize)"
          @click="onBtnClick(+1)"
        >
          {{ nextText }}
        </button>
      </view>
    </view>
    <!--  -->
    <view class="pagination" v-else>
      <view
        style="
          width: 33.33%;
          margin-left: 5px;
          display: flex;
          align-items: center;
        "
      >
        <view class="btn" v-if="pageNum > 1" @click="onBtnClick(-1)">
          <uni-icons type="back" size="18"  color="#6a82ad"></uni-icons>
        </view>
      </view>
      <view
        style="
          width: 33.33%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
        "
        ><text style="color: #288dec">{{ pageNum }}</text
        >/

        <text> {{ Math.ceil(total / pageSize) }}</text>
      </view>
      <view
        style="
          width: 33.33%;
          margin-right: 5px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        "
      >
        <view
          class="btn"
          v-if="pageNum < Math.ceil(total / pageSize)"
          @click="onBtnClick(+1)"
        >
          <uni-icons type="forward" size="18" color="#6a82ad"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "LiPagination",
  props: {
    value: {
      type: Number,
      required: true,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      required: true,
    },
    showIcon: {
      type: Boolean,
      default: false,
    },
    prevText: {
      default: "上一页",
      type: String,
    },
    nextText: {
      default: "下一页",
      type: String,
    },
  },
  data() {
    return {
      pageNum: this.value,
    };
  },
  watch: {
    value(newVal) {
      this.pageNum = newVal;
    },
  },
  methods: {
    onBtnClick(count) {
      this.$emit("input", this.pageNum + count);
      this.$emit("change", {
        current: this.pageNum + count,
        type: count > 0 ? "next" : "prev",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.li-pagination {
  padding: 8px 15px;
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  button {
    display: flex;
    cursor: pointer;
    padding: 0 8px;
    line-height: 30px;
    font-size: 12px;
    position: relative;
    background-color: #f0f0f0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 5px;
  }
  .btn {
    width: 32px;
    height: 32px;
    display: flex;
    cursor: pointer;
    background-color: #f0f0f0;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }
}
</style>
